UI/UX Design Considerations for Spotlight

Summary

This page explains the User Interface and User Experience design considerations for the Spotlight application for banking platform. The following topics are discussed in detail:

• Important aspects of experience design such as the design principles and the design validation processes.
• UX patterns and interactions that are built for the product.

Vision

Develop a banking Spotlight application which improves work efficiency of bank staffs; build a functional, extensible, scalable, and yet easy to use application for any user profile.

Guiding Principles for the Spotlight application Experience

Simplify workflow

People generally act on the principle of least resistance. They do what is easier and choose what is clearer. In a world where technology is getting advanced and complex each day, there is a greater need and focus to make the product and application interface simple. Think of an iPhone – how Steve Jobs made a device which is so advanced yet so simple to use.

Our aim is to reduce user’s cognitive load. We aim to maintain a high level of empathy towards the user, and thus making the process human centered. Simplicity lets the user make quick connection with any application because it increases speed and user satisfaction.

Focus on the here and now

Brain simplifies the perception of things to predict the interaction result. It means that the solution offered to users should be necessary and predictable. We aim to keep user attention and the flow clear. This can be achieved by focusing on what user is working on rather than to confuse with providing all possible actions while doing a task. The usage of progressive disclosure in forms or logically structured step-by-step tasks are few examples that come to the mind.

Keep active information glance able

Too many elements will frustrate the user and ruin the experience. The overcharge of multiplicity creates a sense of chaos. We aim to prioritize and structure relevant information that is easier to access without additional effort by making use of the principles of predictability, familiarity, and clear information architecture.

Familiarity results in efficiency

Both desktop solutions and mobile applications have already developed standards for interface solutions. They are related to user habits and accelerate the learning curve. For instance, users expect to see a profile or login in the upper left corner. The search bar in the mobile solutions should be at the top of the list.

This rule applies not only to the individual elements and their location, but also to the entire pages or functions. Ignoring usage patterns and creating something completely unusual can lead to extending the learning curve, and often to a failure.

Surface the right action at the right time and place

Similar to the principle of ‘Focus’ we talked about before, we aim to provide right options and action to users. Studies has proved that it improves learning and helps a user to accomplish tasks much faster.

Design Process

Our process typically consists of three definitive phases – Discover, Design, Deliver, and Repeat.

In Discover phase, we gather and understand requirements by brainstorming and in-depth interviews with stakeholders – clients, product managers; strive to understand user problems and needs by ways of user testing and focus group discussions and competitive research.

In the design phase, we analyze the data collected during the discovery phase, make inferences from ‘what’ to ‘why’. We ideate by ways of quick sketches, wire-frames, and interactive prototypes which, we use to validate by user testing.

In the deliver phase, we help implement the designs that we made and validated, test the design in UAT, and raise request for fixes if the designs are not proper. It is a process which loops for every new feature and enhancement.

Experience Attributes for Spotlight UX

Simplicity

As discussed before, our aim is to reduce user’s cognitive load. We aim to maintain a high level of empathy towards the user and therefore making the process human centered.

Simplicity lets the user make quick connection with any application. It increases speed and user satisfaction. At the same time, it is important not to confuse simplicity with primitivism. Appropriate simplification allows user to achieve greater results with less effort and knowledge.

Clarity

Clarity is one of the most important attributes of any user interface (UI). Keep in mind that your user interface exists for the sole purpose of facilitating users interacting with your system. To do this, the UI must clearly communicate with users. If users can’t figure out how to use your interface easily, they become frustrated and may abandon the experience. It is necessary to base the information architecture and content on a user’s existing cognitive patterns to make it clear and predictable.

Contextual

A good interface is made up of necessary elements that are logical and concise. Give the user exactly what is required to complete the task rather than adding unnecessary information. Limit your interface to the items that are essential for the user.

Relevant

Relevancy works hand-in-hand with the principles of glanceable information and focus here and now. Provide relevant information which are needed for the user to perform the tasks and not overburden with everything in one place.

Efficient

Your user interface is how a user will get to where they want to go, and do what they want to do. A quality user interface allows users to perform tasks with speed and ease, and operates with efficiency.  Consider the activities and tasks users are most likely to perform and then streamline the process to make each task as quick and easy as possible for users. Consider carefully the goals users are trying to achieve.  

Consistent

With your user interface, you will want to maintain consistency throughout the entire experience. Consistent interfaces will allow your users to rely on, and develop usage patterns that will improve the experience. People crave consistency and you should give your users the opportunity to be proven correct when they rely on it. Users want an experience where if they learn to do something, they will be able to rely on it working the same way on other screens. Maintain language, layout, and design throughout your interface. By doing so, you make it easier for your users to understand how things will work, increase their efficiency, and improve the user experience.

Application Map

Information Architecture

When interacting with any digital service the user builds a mental map. This map should answer how to implement a particular scenario, where to look for information, and what opportunities the service provides. The basis here is the navigation and the information blocks of the service. It is necessary to base information architecture on a user’s existing cognitive patterns to make it clear and predictable. The Card Sorting identification method really comes in handy here. All the elements and the service functions should be logically grouped for a user based on the cognitive patterns.

We have conducted a card sorting exercise to determine the appropriate grouping.

Application Design Patterns and Guidelines

Login form

• Provided view password option to prevent errors and accidental account locking. View password option simplified as per Accessibility guidelines. It is visible with a single click rather than the need to click and hold as the target is small due to icon size.
• Visual indication as well as text indication for the Inline errors as per accessibility guidelines. The system highlights the erroneous area, and provides helpful content to understand the error rather than guessing it.
• User control and freedom is given by providing “Remember me” option to save user ID and password.
• Clear CTA provided for user to indicate primary action and focus on it.
• “Forgot user ID or password” link made contextual by not hiding it, and there is a proper sequence given to it.

Visibility of the System Status, Error Prevention, Recognition rather than recall

The inline errors are differentiated with page level errors that helps the users focus on field level fixes required. Page level errors convey the system status and thus avoid accidental locking of the account.

Instead of increasing the cognitive load of remembering how many attempts made, the user is warned about the remaining attempts.

Navigation

We have placed the main site navigation (left menu) on the left side of all pages. The main site navigation provides visual indication of where a user is currently located on the menu, with the ability to quickly switch to other menu items. The left menu system is always open to make it simple and increases efficiency. We have arrived at the present grouping of modules based on the card sorting exercise. Gestalt's principles of grouping is used in this application.

To retain Temenos brand identity, a footer is introduced with Temenos logo and it is mandatory in all implementations.

Minimalist design

The left navigation options change as per the user role and the permissions. Rather than presenting all options and disabling, the users are presented with only the applicable actions based on the role and permissions.

Context Menu variations

To make the actions contextual and consistent, we designed two distinct ways to use CTAs for page level listings. For single action button or a link, we are going to display it inline and if there are more than one action, we display them in the contextual option menu.

The contextual menu options are grouped based on the actions. The CRUD operations are separated from other actions and thereby improves the readability.

Visibility of the System Status and Error Prevention

Any actions that impact the system like deactivate, suspend, or delete, prompts the user with a confirmation dialog to prevent accidental changes. In such cases, the primary action is always differentiated with secondary action to ensure user focuses on the action. Any system changes because of the user action, be it a success or a failure, is shown in a toast message. The toast message automatically closes after a few seconds, and also has the ability to close by user-action. In case of errors or where users’ attention is required, the toast message doesn’t close automatically.

Breadcrumbs


We have used breadcrumbs to serve few purposes:

• Location: It shows where you are in the page hierarchy.
• Path: It shows what steps a user has taken, and also helps to navigate back to the root of that module with a single click.

We have also re-purposed the space to show relevant content to help user when necessary.

In some cases, like search, it also conveys the context or search criteria, and the ability for the user to modify the criteria.

Scalable, Reusable, and Easy navigation


Similar layout and structure is used for add and edit flows to make it simple and consistent to reduce user’s learning curve. A user can navigate  to any step or finish at any step unless it is mandatory. A step that is optional is clearly mentioned.

In future, if the number of inputs to be taken are more, the same design can be used to add more number of steps. Also, same design can be used, where in some cases it requires only two or three steps.

• Fixed footer used for action buttons to support any screen resolution.
• Since majority of the fields are mandatory, only optional fields are indicated to avoid clutter, improve readability, and identify easily.
• Save button is not shown if there are more mandatory actions to be done by the user. All data entered are saved in the final step.
• View interaction is separated from add and edit flows to accommodate read-only user as well as to focus on the content as opposed to controls.
• Easy navigation between view and edit options are given from the listing page.
  
• Available and selected items are placed next to each other for easy search and selection, or deselection.
• In the "Available" and "Selected" lists, a user can move all values with a single click by clicking “Add All”. The same link is hidden when all the values are added. The same applies to “Remove All”.
• In the "Selected" list on hover, a user can find an “X” button to remove the selected value.
• In the "Available" list, a user can add individual values by clicking “Add”.

Role restrictions


Although similar like the last slide he interaction here is tweaked slightly to support certain use case. It is scalable.

Only one user can be assigned with a single role. Hence “Add All” & “Remove All” actions are removed. Also, once a role has been added, the "Add" button for other roles are hidden. Only when the user removes the already selected role, then he can add a new role.

Calendar

Custom date selection widget developed and implemented for date selection which is both robust and scalable. This widget can be used to select single/multiple dates with one-click selection of week and month.

While selecting the dates, a user can navigate both calendars separately independent of the other calendar. This gives the freedom to the user to select a “To” date with reference to “From” date. In many date picker interactions, both calendars move simultaneously as user tries to navigate one calendar to choose a date.

User can navigate to any month/year by clicking an arrow or by typing the date in the input box provided. Control and freedom are given to the user.

Data Grid level actions

The common actions activate based on the selection of the item and its state. Adhering to the principle of Fitts’s law, the contextual actions are displayed close to the area where the user selects them. User can easily identify the possible actions on selection.

File upload

Modern pattern of file upload is used. User is provided with option to drag and drop or browse for file upload.

Ability to search for multiple users

While creating groups, admin is allowed to add multiple users to the group. Hence the search contains all possible selection options with a full view and the results are shown in a separate page. User is allowed to modify the search criteria or remove the tags to refine the results.

Search a Customer

A search form is used as the start page for customer module, instead of showing a list of customers.

We chose this approach based on our user testing and observation sessions. The most common use case was to look for certain customer, and the easiest way is to search instead of looking through a list. It also helps the system to fetch relevant customer a lot faster (compared to the approach of listing them all).

All possible search criteria shown - can be customized to show the one most suited for each banks.

Customer details

To support the design principles of relevancy and contextual, Customer primary details are shown at the top, and with all other details shown in sub sections clearly marked. It gives the Admin user a  view of the customer at all time, with additional ability to collapse.

Customer specific tags like “Locked”, “Defaulter” and “Fraud Detected” are kept next to the customer name so that the status is visible even though the General information section is collapsed.

The grouping and order of the details are placed keeping the Gestalt’s principles in mind, which states the similarly looking information should be placed together.

Instead of making the whole page editable, which is prone to error in case user modifies non-relevant details, the data is grouped into sections and only sections are made editable. It is easy to locate sections of data and more contextual to edit them while focusing.

Instead of keeping all action buttons at the bottom, they are placed next to each section. As per Fitts’s law, the chances are higher that user misses the action buttons if they are placed far away from the source.

Notes interaction

The customer can add notes any time while accessing the customer profile for the next CSR to know the earlier interaction details with the same customer. It allows the CSR to open notes within the page without blocking the background info. It also allows the user to refer to customer details while making notes.

Flexibility and Efficiency of use

The outage message can be created individually or in a sequence one after the other, just by clicking Save & Add New button. User control and freedom is given fully to the user.

User need not remember if a message has already been added or not. As soon as the user selects the message, it is populated if the message is already added. This helps to reduce cognitive load as well as to avoid duplication of messages too. And the buttons change to “Update”, “Update & Add New” while updating and thus it is scalable design approach.

User Control and freedom

Users are given a choice to expand all sections and update the content or collapse a section to focus on filling a single section. Complete freedom has been given to the user. Also, the user need not click on next to go to the optional step. The user can just click Save to finish the location update.

Aesthetic and Minimalistic design

In the Secure Images section, user can upload images with one click. All the images are stored in a same page with a scroll, so need not have different sections or pages for upload and listing.

Affordance

The forms are designed keeping the affordance principle in mind. Some fields require more text while others require small text only. The fields widths are designed based on the expected text length.

CSR Portal grouping

In the CSR portal which is the second mostly used module, the message groups and filters are always shown upfront for easy navigation. Templates option is given in the same section and can be accessible based on permissions. 

The user need not remember the CSR Agent whom an issue was assigned. As user types, it prompts with the matched names as a Type-ahead so that the user can select the appropriate CSR Agent to filter.

CSR New Message

In the new message, the window can be dragged to view the background information. Also, the same can be resized to accommodate in larger monitors.

Scalable Logs view

The view of the logs and reports are changed to avoid monotony of listing pages. This is scalable. Also, there are different categories such as custom logs which, user can save based on a particular filtered view.

Accessibility principles

Around 4% of all user have some visual problems. It's really important to ensure banking interface accessibility for them through the right use of contrast, color, and font size. For example, in case of an error you should avoid using color as the only element to indicate the required action. It is better to combine it with an icon and a notification.

Other possible limitations should also be considered. For example, it’s impossible to use interfaces overloaded by animation in regions with low Internet speed.

For the user who depends on screen readers or any assistive technology devices, it is decided to provide equivalent descriptive text alternatives for elements like buttons, icons, and images either they are interactive or non-interactive.

Design system - Style guide

An extensive style guide is created to guide developers and designers about different patterns and elements. It is being updated regularly with continuous review after the implementation.

Contact the Temenos products UX team for any reference to the style guide.

Extensive user testing

Rigorous User Testing is being conducted as a continuous feedback gathering and improvement task.

Important Note

Instruction to the teams that are working on the customization for various clients: We are promoting the Temenos Digital Banking Spotlight application as a product and discourage any customization to retain the core entity. The vision of the product, design principles, and the attributes and experience patterns are carefully chosen as well as validated through user testing. We are not open to customization in terms of look-and-feel either. We have plans to revamp the presentation layer as per road-map. However, the client logo can be changed if required. “Powered by Temenos” should remain as-is to retain Temenos branding.

Temenos Product UI/UX team would consider specific feature requests for certain clients that may not exist in the current design. We can prioritize it and accommodate so that the product remains intact.